<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:cus="http://www.thymeleaf.org">

<head>
    <div th:replace="admin/head :: head"></div>

    <title>系统区域列表</title>

    <!-- jquery.pagination -->
    <script th:src="${#request.getAttribute('ctx') + '/static/common/jquery.pagination/jquery.pagination.js'}"></script>


</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a th:href="@{/admin}">首页</a>
        <a>
          <cite>系统区域列表</cite>
        </a>
      </span>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" th:action="@{/admin/area/list}" method="post" id="searchForm">
            <input type="text" name="id" th:value="${area.id}" placeholder="区域ID" autocomplete="off" class="layui-input">
            <input type="text" name="name" th:value="${area.name}" placeholder="区域名称" autocomplete="off" class="layui-input">
            <input type="text" name="level" th:value="${area.level}" placeholder="区域等级" autocomplete="off" class="layui-input">
            <div class="layui-input-inline">
                <select name="isOpen">
                    <option value="">请选择是否开放</option>
                    <option value="0" th:selected="${area ne null and area.isOpen eq 0}">不开放</option>
                    <option value="1" th:selected="${area ne null and area.isOpen eq 1}">开放</option>
                </select>
            </div>
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <xblock>
        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon">ဂ</i>
        </a>
        <span class="x-right" style="line-height:40px" th:text="|共有数据: ${page.total} 条|"></span>
    </xblock>

    <!--/* 注释掉-->
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i
                        class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>prefix</th>
            <th>code</th>
            <th>名称</th>
            <th>上级ID</th>
            <th>等级</th>
            <th>是否开放</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${page.list}">
            <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" th:attr="data-id=${item.id}"><i
                        class="layui-icon">&#xe605;</i>
                </div>
            </td>
            <td th:text="${item.id}"></td>
            <td th:text="${item.codePrefix}"></td>
            <td th:text="${item.code}"></td>
            <td th:text="${item.name}"></td>
            <td th:text="${item.pid}"></td>
            <td th:text="${item.level}"></td>

            <td>
                <form class="layui-form">
                    <input type="checkbox" lay-filter="change" lay-skin="switch"
                           th:checked="${item.isOpen ne null and item.isOpen eq 1}"
                           th:value="${item.isOpen}" th:attr="id=${item.id}">
                </form>
            </td>
            <td class="td-manage">
                <a title="查看" th:onclick="'x_admin_show(\'编辑\',\'/admin/area/form?id=' + ${item.id} + '\')'"
                   href="javascript:;">
                    <i class="layui-icon">&#xe63c;</i>
                </a>
                <a title="删除" th:onclick="'del(\'/admin/area/delete/\', ' + ${item.id} + ')'" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <!--*/-->

    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>名称</th>
            <th>prefix</th>
            <th>code</th>
            <th>上级ID</th>
            <th>等级</th>
            <th>是否开放</th>
        </thead>

        <tbody class="x-cate">
            <tr th:attr="fid=${item.pid}, cate-id=${item.id}" th:each="item, index:${page.list}">
                <td>
                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" th:attr="data-id=${item.id}"><i class="layui-icon">&#xe605;</i></div>
                </td>
                <td th:attr="id='id' + ${index.index}" th:text="${item.id}"></td>
                <td>
                    <span cus:space="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;, ${item.level - 1}"></span>

                    <i th:if="${item.level ne 3}" class="layui-icon x-show" status='true'>&#xe623;</i>

                    <input type="text" class="layui-input width-50" th:attr="id='name' + ${index.index}" th:value="${item.name}">
                </td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='codePrefix' + ${index.index}" th:value="${item.codePrefix}"></td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='code' + ${index.index}" th:value="${item.code}"></td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='pid' + ${index.index}" th:value="${item.pid}"></td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='level' + ${index.index}" th:value="${item.level}"></td>
                <td>
                    <form class="layui-form">
                        <input type="checkbox" lay-filter="change" lay-skin="switch"
                               th:checked="${item.isOpen ne null and item.isOpen eq 1}"
                               th:value="${item.isOpen}" th:attr="id=${item.id}">
                    </form>
                </td>
            </tr>
        </tbody>
    </table>

    <!--/* 注释掉-->
    <div class="page">
        <div class="page-box"></div>
    </div>
    <!--*/-->
</div>
<script th:inline="javascript">
    /*[- 注释掉*/
    $('.page-box').pagination({
        totalData: [[${page.total}]],
        showData: [[${page.pageSize}]],
        current: [[${page.pageNum}]],
        pageCount: [[${page.pages}]],
        coping: true,
        keepShowPN: true,
        callback: function (index) {
            $('#searchForm').attr('action',
                location.href.substring(0,
                    location.href.indexOf('?') < 0
                        ? location.href.length
                        : location.href.indexOf('?')
                ) + "?pageNum=" + index.getCurrent() + "&pageSize=[[${page.pageSize}]]");
            $('#searchForm').submit();
        }
    });
    /*-]*/

    function save(index) {
        var data = {
            id: $('#id' + index).text(),
            name: $('#name' + index).val(),
            pid: $('#pid' + index).val(),
            code: $('#code' + index).val(),
            codePrefix: $('#codePrefix' + index).val(),
            level: $('#level' + index).val(),
            isOpen: $('#isOpen' + index).val(),
        }
    }

    layui.use('form', function () {
        var form = layui.form;

        form.on('submit(search)', function (data) {
            this.submit();
        })

        form.on('switch(change)', function (data) {
            var self = this;

            self.excute = function(id, value) {
                $.ajax({
                    type: 'post',
                    url: '/admin/area/api/change_show',
                    data: {
                        id: id,
                        isOpen: value
                    },
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                        self.disabled = true;
                    },
                    success: function(result) {
                        if(result.status == 200) {
                            layer.msg(Messages.SUCCESS, {icon: 6, time: 3000});
                        } else {
                            layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                            return false;
                        }
                    },
                    error: function(e) {
                        layer.alert(Messages.ERROR, {icon: 1});
                    }
                })
                self.disabled = false;
            }

            var id = $(self).attr('id');
            var value = self.checked;

            if (value) {
                self.excute(id, 1);
            } else {
                self.excute(id, 0);
            }
        })
    });

</script>
</body>

</html>